<template>
	<view class="expire">
		<scroll-view scroll-y class="scroll_view">
			<view class="list">
				<view class="item" v-for="item in 99">
					<view class="item_view">
						<view class="name">至尊卡优惠券至尊卡优惠券至尊卡优惠券</view>
						<view class="time">2023.08.01-2024.08.31</view>
						<view class="rule">使用规则：全平台商品通用</view>
					</view>
					<view class="item_cell">
						<view class="price">
							<view class="unit">￥</view>
							<view class="value">30</view>
						</view>
						<view class="tips">满￥10使用</view>
					</view>
					<image src="@/static/images/expire.png" class="use"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.expire {
		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 196rpx);

			.list {
				padding: 0 22rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					height: 220rpx;
					margin-top: 20rpx;
					background: url(@/static/images/item2.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					position: relative;

					.use {
						width: 141rpx;
						height: 141rpx;
						position: absolute;
						top: 43rpx;
						right: 223rpx;
						z-index: 99;
					}

					.item_view {
						flex: 1;
						overflow: hidden;
						padding-left: 36rpx;
						padding-top: 40rpx;
						box-sizing: border-box;

						.name {
							color: #222222;
							font-size: 32rpx;
							font-weight: bold;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.time {
							color: #222222;
							font-size: 22rpx;
							margin: 26rpx 0;
						}

						.rule {
							color: #222222;
							font-size: 22rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					.item_cell {
						width: 220rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.price {
							display: flex;
							align-items: flex-end;

							.unit {
								color: #FFFFFF;
								font-size: 44rpx;
								font-weight: bold;
							}

							.value {
								color: #FFFFFF;
								font-size: 70rpx;
								font-weight: bold;
							}
						}

						.tips {
							color: #FFFFFF;
							font-size: 22rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>